<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8">
		<title>颜宏周 </title>
		<style>
			body{
				background-image:url(img/2.png) ;
			}
			#heart3D{
				position: relative;
				width: 100px;
				height: 160px;
				margin: 200px auto;
				transform-style: preserve-3d;
				animation: rot 10s linear infinite;/*名称 时间 匀速运动 无限重复*/
			}
			@keyframes rot{
				from{transform: rotateY(0deg) rotateX(0deg);}
				to{transform: rotateY(360deg) rotateX(360deg);}
			}
			#heart3D div.heart{
				position:absolute;
				left: 0;
				top: 0;
				width: 100px;
				height: 160px;
				border: 2px solid red;
				border-left: 0;
				border-bottom: 0;
				border-radius:50% 50% 0/50% 40% ;/*顺时针方向可以有8个值 x x x x /x x x x*/
				/*transform: rotate(45deg);*/
			}
					body{
				perspective: 1000px;/*景深：视角*/
			}
			#cube{
				position: relative;/*相对定位，参考物*/
				width: 50px;
				height: 50px;
				/*margin: 300px auto;*/
				transform-style: preserve-3d;/*3D环境*/
				/*transition: 2s;/*动画过渡*/
			/*	transform-origin:50% 50% -101px ;*/
				transform: translateX(25px) translateY(54px) translateZ(25px);
				
			}
			#cube div{
				position: absolute;/*绝对定位*/
				left: 0;
				top: 0;
				width: 50px;
				height: 50px;
				/*border: 2px solid red;*/
			}
			#cube div:nth-child(1)
			{
				top: -50px;
				/*transform-origin:50% 50% 0 ;旋转中心x y z的高度的%比*/
				transform-origin:bottom;/*中心下边*/
				transform: rotateX(90deg);/*x轴转90*/
			}/*css3的结构选择器*/
			#cube div:nth-child(2)
			{	transform-origin:top;/*中心下边*/
				transform: rotateX(-90deg);
				top: 50px;
			}/*css3的结构选择器*/
			#cube div:nth-child(3) 
			{	transform-origin:right;/*中心下边*/
				transform: rotateY(-90deg);
				left: -50px;
			}/*css3的结构选择器*/
			#cube div:nth-child(4)
			{	transform-origin:left;/*中心下边*/
				transform: rotateY(90deg);
				left: 50px;
			}/*css3的结构选择器*/
			#cube div:nth-child(5)
			{
				
			}
			#cube div:nth-child(6)
			{
				transform: translateZ(-25px);/*沿着Z轴做移动*/
			}
			#cube:hover{
				/*transform: rotateY(360deg);*/
			}
			#cube div img{
			width: 50px;
			height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="heart3D">
			<div id="cube">
	        	<div><img src="img/1.png"></div>
	        	<div><img src="img/1.png"></div>
	        	<div><img src="img/1.png"></div>
	        	<div><img src="img/1.png"></div>
	        	<div><img src="img/1.png"></div>
	        	<div><img src="img/1.png"></div>
	        </div>
		</div>
		<audio autoplay="autoplay">
			<source src="https://music.163.com/song/media/outer/url?id=1448143993.mp3" type="audio/mp3"></source>
		</audio>
			<script>
				var oHeart3D=document.getElementById("heart3D");
				for(i=0;i<36;i++){
					var oDiv=document.createElement("div");
					oDiv.className="heart"
					oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translate(30px)" ;
					oHeart3D.appendChild(oDiv);
				}
				var n=0;
			function title(){
				n++;
				if(n==3) n=1;
				if(n==2) document.title="颜宏周&温疆萍 "
				if(n==1) document.title="永远在一起"
				setTimeout("title()",1000)
			} 
			title();
			</script>
	</body>
</html>
